<div class="row justify-content-center">
    <div class="row justify-content-center" style="margin-top: 80px">
        <a  href="/">
            <img src="../../../content/images/cubeai128.png" style="height: 80px">
        </a>
    </div>
</div>
<br>
<div class="row justify-content-center">
    <mat-card>

        <form *ngIf="!resetKey">
            <div class="modal-header">
                <h4>忘记密码</h4>
            </div>

            <div class="modal-body">
                <br>
                <p>请输入你的电子邮箱地址，以便找回密码：</p>
                <br>
                <div>
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="email" type="email" placeholder="电子邮箱" maxlength="50">
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('required')">
                            必须输入电子邮箱地址！
                        </mat-error>
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('email')">
                            电子邮箱地址无效！
                        </mat-error>
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('maxlength')">
                            本字段长度不能超过50个字符！
                        </mat-error>
                        <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('minlength')">
                            本字段长度最少5个字符！
                        </mat-error>
                        <mat-error *ngIf="email.hasError('noExist')">
                            该email地址不存在，请另外选择一个！
                        </mat-error>
                        <mat-error *ngIf="email.pending">
                            正在验证email地址......
                        </mat-error>
                    </mat-form-field>
                </div>
                <div>
                    <mat-form-field style="width: 60%">
                        <input matInput [formControl]="myCode" type="text" placeholder="校验码">
                    </mat-form-field>
                    <a (click)="getVerifyCode()">
                        <img src="{{verifyPicture}}" alt="获取验证码">
                    </a>
                </div>

                <br>
                <div class="alert alert-success" *ngIf="status === 'find_success'">
                    <p>密码重置密钥已发送至你提供的电子邮箱： {{email.value}}</p>
                    <p>请点击邮件中链接地址或将其复制到浏览器地址框打开页面，来重置你的新密码...</p>
                </div>
                <div class="alert alert-danger" *ngIf="status === 'find_fail'">
                    <p>发送找回密码邮件失败，请检查验证码是否正确...</p>
                </div>
            </div>

            <div class="modal-footer">
                <button mat-raised-button color="primary" (click)="findPassword()" [disabled]="email.invalid || myCode.invalid || status === 'find_success'">
                    <span class="fa fa-check-circle">&nbsp;找回密码</span>
                </button>
            </div>

        </form>

        <form *ngIf="resetKey">
            <div class="modal-header">
                <h4>重置密码</h4>
            </div>

            <div class="modal-body">
                <br>
                <p>请在下面输入你的新密码：</p>
                <br>
                <div>
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="password" type="password" placeholder="新密码" (change)="confirmPassword.setValue('')">
                        <mat-error *ngIf="password.value && password.hasError('passwordStrong')">
                            {{password.errors.passwordStrong.value}}
                        </mat-error>
                    </mat-form-field>
                </div>
                <div>
                    <mat-form-field style="width: 100%">
                        <input matInput [formControl]="confirmPassword" type="password" placeholder="再次输入新密码">
                        <mat-error *ngIf="confirmPassword.value && confirmPassword.hasError('passwordMatch')">
                            {{confirmPassword.errors.passwordMatch.value}}
                        </mat-error>
                    </mat-form-field>
                </div>
                <div class="alert alert-success" *ngIf="status == 'reset_success'">
                    <p>密码重置成功！你可以使用新密码登录...</p>
                </div>
                <div class="alert alert-danger" *ngIf="status == 'reset_fail'">
                    <p>密码重置失败！请检查重置密钥是否有效...</p>
                </div>
            </div>

            <div class="modal-footer">
                <button mat-raised-button color="primary" (click)="resetPassword()"
                        [disabled]="password.invalid || confirmPassword.invalid" *ngIf="status !== 'reset_success'">
                    <span class="fa fa-check-circle">&nbsp;重置密码</span>
                </button>
                <button mat-raised-button color="primary" (click)="goLogin()" *ngIf="status === 'reset_success'">
                    <span class="fa fa-sign-in">&nbsp;去登录</span>
                </button>
            </div>

        </form>

    </mat-card>
</div>
